<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			display: grid;
			justify-content: center;
			align-content: center;
			min-height: 100vh;
			background-color: #1D1D1D;
		}
		.card {
			width: 800px;
			height: 400px;
			border-radius: 10px;
			background: #eee;
			transform: perspective(1000px) translateZ(0) rotateX(var(--xx)) rotateY(var(--yy));
			transition: all 80ms linear 0s;
		}
	</style>
</head>
<body>
	<div class="card" id="card">
	</div>
	<script>
		var setProp = function setProp(el, prop, value){
			return el.style.setProperty(prop, value);
		};
		var el = document.getElementById('card');
		var onMouseUpdate = function onMouseUpdate(e) {
			var width = el.offsetWidth;
			var XRel = e.pageX - el.offsetLeft;
			var YRel = e.pageY - el.offsetTop;
			var YAngle = -(0.5-XRel / width) * 15;
			var XAngle = (0.5-YRel / width) * 15;
			setProp(el, '--yy', YAngle + 'deg');
			setProp(el, '--xx', XAngle + 'deg');
		};
		el.addEventListener('mousemove', onMouseUpdate);
		el.addEventListener('mouseenter', onMouseUpdate);
		el.addEventListener('mouseout', function () {
			el.style.setProperty('--yy', '0');
			el.style.setProperty('--xx', '0');
		});
	</script>
</body>
</html>